<template>
  <div class="form">
    <h2>表单--由于暂无后端接口，不会保存到服务器，退出登录后会还原</h2>
    <h2>
      普通表单在表格修改和添加数据时所用的弹窗已经实现，这里展示文件上传部分
    </h2>
    <a-form
      ref="formRef"
      name="custom-validation"
      :model="formState"
      :rules="rules"
      v-bind="layout"
      @finish="handleFinish"
    >
      <a-form-item has-feedback label="Name" name="name">
        <a-input
          v-model:value="formState.name"
          type="text"
          autocomplete="off"
        />
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">提交</a-button>
        <a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
      </a-form-item>
    </a-form>
    <a-form
      ref="photoForm"
      name="custom-validation"
      :model="photoData"
      v-bind="layout"
      @finish="photoSubmit"
    >
      <a-form-item label="头像">
        <input
          type="file"
          style="visibility: hidden; height: 10px"
          id="inp"
          @change="photoChange"
        />
        <div class="default" v-if="!photoData.imageUrl" @click="photoClick">
          <plus-outlined />
          <p>上传头像</p>
        </div>
        <div class="default" v-else @click="photoClick">
          <img :src="photoData.imageUrl" />
        </div>
      </a-form-item>
      <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" html-type="submit">上传</a-button>
        <a-button style="margin-left: 10px" @click="delPhoto"
          >不使用头像</a-button
        >
      </a-form-item>
      <el-input
  type="textarea"
  autosize
  placeholder="请输入内容"
  v-model="textarea1">
</el-input>
    </a-form>
  </div>
</template>

<script>
export default {
  name: "Form",
};
</script>

<script setup>
import { ref } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import useUserStore from "@/store/modules/user";
import { message } from "ant-design-vue";

// 从pinia仓库中获取用户信息
const user = useUserStore();

const formRef = ref();

const photoForm = ref();

const formState = ref({
  name: user.userDatas.name,
});

const photoData = ref({
  imageUrl: user.userDatas.photo,
});

const checkName = (_rule, val) => {
  if (val) {
    if (val === user.userDatas.name) {
      return Promise.reject("不能与原用户名相同");
    }
  } else {
    return Promise.reject("请输入用户名");
  }
  return Promise.resolve();
};

const rules = {
  name: [
    {
      require: true,
      validator: checkName,
    },
  ],
  
};

const resetForm = () => {
  formRef.value.resetFields();
  message.success('已恢复为修改前的字段')
};

const handleFinish = (values) => {
  try {
    user.changeData("name", values.name);
    message.success("修改成功");
  } catch (e) {}
};

const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 14,
  },
};

const photoClick = () => {
  document.querySelector("#inp").click();
};

const photoChange = (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    photoData.value.imageUrl = e.target.result;
  };
};

const photoSubmit = () => {
  try {
    if (photoData.value.imageUrl) {
      message.success("上传成功");
      return user.changeData("photo", photoData.value.imageUrl);
    }
    message.warning("未选择图像");
  } catch (e) {}
};

const delPhoto = () => {
  photoData.value.imageUrl = "";
  user.changeData("photo", "");
  message.success("设定成功");
};
</script>

<style scoped lang="scss">
.form {
  h2 {
    text-align: center;
    margin-bottom: 30px;
  }

  .default {
    width: 100px;
    height: 100px;
    background-color: #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding-top: 15px;

    img {
      width: 100%;
      height: 100%;
    }

    cursor: pointer;
  }
}
</style>
